<style include="settings-shared">
  #disk-labels {
    display: flex;
    justify-content: space-between;
  }

  #resize-block {
    align-items: stretch;
    margin-inline-end: 10px;
    margin-inline-start: 10px;
  }

  .error {
    color: var(--cros-text-color-alert);
  }

  #errorIcon {
    --iron-icon-fill-color: var(--cros-icon-color-alert);
    display: inline-block;
  }

  #warningIcon {
    --iron-icon-fill-color: var(--cros-icon-color-warning);
  }

  #message {
    margin-inline-end: auto;
  }

</style>
<cr-dialog id="diskResizeDialog" close-text="$i18n{close}">
  <!-- The title gets read out multiple times. This was a deliberate
       tradeoff made by cr-dialog so for now that's what we're stuck with:
       https://chromium-review.googlesource.com/c/chromium/src/+/1906254
  -->
  <div slot="title">$i18n{crostiniDiskResizeTitle}</div>
  <div slot="body">
    <template is="dom-if" if="[[eq_(displayState_, DisplayState.RESIZE)]]">
      <div>
        <div hidden="[[isLowSpaceAvailable_]]" id="recommended-size">
          $i18n{crostiniDiskResizeRecommended}
        </div>
        <div hidden="[[!isLowSpaceAvailable_]]"
            id="recommended-size-warning">
          <iron-icon id="warningIcon" icon="cr:warning"></iron-icon>
          $i18n{crostiniDiskResizeRecommendedWarning}
        </div>
      </div>
      <div id="resize-block">
        <cr-slider id="diskSlider" pin="true"
            value="[[defaultDiskSizeTick_]]" ticks="[[diskSizeTicks_]]"
            disabled="[[resizing_]]" max="[[maxDiskSizeTick_]]">
        </cr-slider>
        <div id="disk-labels" aria-hidden="true">
          <div id="label-begin">[[minDiskSize_]]</div>
          <div id="label-end">[[maxDiskSize_]]</div>
        </div>
      </div>
    </template>
    <template is="dom-if"
        if="[[eq_(displayState_, DisplayState.UNSUPPORTED)]]">
      <div id="unsupported">
        $i18n{crostiniDiskResizeUnsupported}
      </div>
    </template>
    <template is="dom-if" if="[[eq_(displayState_, DisplayState.LOADING)]]">
      <div id="loading">
        $i18n{crostiniDiskResizeLoading}
      </div>
    </template>
    <template is="dom-if" if="[[eq_(displayState_, DisplayState.ERROR)]]">
      <span id="error" aria-hidden="true">
        $i18n{crostiniDiskResizeError}
      </span>
      <cr-button id="retry" on-click="onRetryClick_"
          aria-describedby="error">
        $i18n{crostiniDiskResizeErrorRetry}
      </cr-button>
    </template>
  </div>
  <div slot="button-container">
    <div id="message" aria-live="assertive">
      <span id="resizing"
          hidden="[[!eq_(resizeState_, ResizeState.RESIZING)]]">
        $i18n{crostiniDiskResizeInProgress}
      </span>
      <template is="dom-if" if="[[eq_(resizeState_, ResizeState.ERROR)]]">
        <span id="resize-error" class="error">
          <iron-icon id="errorIcon" icon="cr:error-outline"></iron-icon>
          $i18n{crostiniDiskResizeResizingError}
        </span>
      </template>
      <span id="done" hidden="[[!eq_(resizeState_, ResizeState.DONE)]]">
        $i18n{crostiniDiskResizeDone}
      </span>
    </div>
    <cr-button id="cancel" class="cancel-button"
        disabled="[[eq_(resizeState_, ResizeState.RESIZING)]]"
        on-click="onCancelClick_">
      $i18n{crostiniDiskResizeCancel}
    </cr-button>
    <cr-button id="resize" class="action-button"
        disabled="[[resizeDisabled_(displayState_, resizeState_)]]"
        on-click="onResizeClick_">
      $i18n{crostiniDiskResizeGoButton}
    </cr-button>
  </div>
</cr-dialog>
